<template>
  <div class="app-container">
    <!-- 操作查询面板 -->
    <div class="inquire-top">
      <!-- 控制 -->
      <div class="inquire-button">
        <!-- 按钮 -->
        <div class="search-condition">
          <!-- <div class="condition"> -->
          <el-row :gutter="24">
            <el-col :span="4">
              <el-select
                v-model="licenseNo"
                filterable
                remote
                reserve-keyword
                placeholder="请输入车牌号"
                :remote-method="remoteMethod"
              >
                <el-option v-for="item in options" :key="item.id" :label="item.licenseNo" :value="item.licenseNo" />
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-input v-model="auditName" style="width: 120px;" size="small" placeholder="请输入审核人" />
            </el-col>
            <el-col :span="5">
              <el-select v-model="typeIds" multiple size="small" placeholder="请选择车辆类型">
                <el-option v-for="item in carState" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" size="small">导出</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" size="small" @click="resetBlick">重置</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" size="small" @click="handleSearch">查询</el-button>

            </el-col>
            <el-col :span="3">
              <div
                class="button"
                style="height: 30px;line-height: 30px;margin-right: 30px;width: 100%;"
                @click="inquireBotton()"
              ><i class="el-icon-circle-plus-outline" />&nbsp;操作</div>
            </el-col>
            <!-- </div> -->
          </el-row>
        </div>
      </div>
      <div v-show="isshow" class="search-input">
        <el-form ref="form" :model="searchFrom" label-width="110px">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="申请时间：">
                <el-time-picker
                  v-model="searchFrom.application"
                  is-range
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审核时间：">
                <el-time-picker
                  v-model="searchFrom.auditTime"
                  is-range
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!-- 车辆状态  标签页-->
    <div class="vehicle-state">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- 全部 -->
        <el-tab-pane v-for="item in header" :key="item.name" :label="item.title" :name="item.name">
          <el-table
            :key="tableKey"
            v-loading="listLoading"
            :data="list"
            border
            stripe
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column label="序号" type="index" align="center" width="50" />

            <el-table-column label="车牌号" min-width="110px" align="center">
              <template slot-scope="{ row }">
                <span class="link-type">{{
                  row.licenseNo
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="额定超载" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.ratedLoad }}</span>
              </template>
            </el-table-column>
            <el-table-column label="车型车长" min-width="150px" align="center">
              <template slot-scope="{ row }">
                <span>{{ getType(row.typeId) +'/'+ getLength(row.lengthId) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="申请时间" min-width="150px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.lastUpdateTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="审核员" min-width="150px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.auditName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="审核时间" min-width="150px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.auditTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
              <template slot-scope="{ row }">
                <el-button type="danger" size="mini" @click="handleUpdate(row)">
                  审核
                </el-button>

                <el-button v-if="row.status != 'deleted'" size="mini" type="primary" @click="handleDelete(row)">
                  详情
                </el-button>

              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.current"
            :limit.sync="listQuery.size"
            @pagination="getList"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 引用子组件 -->
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'
import { getCarType, getCarLength, carList, carDetails, operation, plateFuzzy } from '@/api/tms/car'
export default {
  name: 'Index',
  components: { Pagination },
  data() {
    return {
      header: [
        {
          title: '全部',
          name: 'quanbu'
        }, {
          title: '未审核',
          name: 'PENDING'
        }, {
          title: '审核通过',
          name: 'SUCCESS'
        }, {
          title: '审核不通过',
          name: 'FALL'
        }

      ],
      licenseNo: '',
      auditName: '',
      typeIds: [],
      // statuses: [],
      list: [],
      tableKey: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 20
      },
      carState: [], // 车辆状态
      carLength: [],
      activeName: 'quanbu',
      total: 0,
      isshow: false,
      order: '', // 订单号
      waybill: '',
      freightName: '',
      searchFrom: {
        application: '',
        auditTime: '',
        auditStatuses: []
      },
      tabAuditStatuses: '',
      options: [],
      auditStatuses: []
    }
  },
  created() {
    this.getCarType()
    this.getCarLength()
    this.getList()
  },
  methods: {
    // 根据车牌号进行模糊查询
    remoteMethod(query) {
      if (query !== '') {
        const data = {
          'licenseNo': query
        }
        plateFuzzy(data).then((response) => {
          const listArray = []
          response.map(item => {
            const data = {
              id: item.id,
              licenseNo: item.licenseNo
            }
            listArray.push(data)
          })
          this.options = listArray.filter(item => {
            return item.licenseNo.toLowerCase()
              .indexOf(query.toLowerCase()) > -1
          })
        })
      }
    },
    // 重置
    resetBlick() {
      this.listQuery = {
        current: 1,
        size: 20
      }
      this.licenseNo = ''
      this.auditName = ''
      this.typeIds = []
      this.searchFrom = {
        application: '',
        auditTime: '',
        auditStatuses: []
      }
      this.tabAuditStatuses = ''
      this.getList()
    },
    // 点击 审核
    handleUpdate(row) {
      this.$router.push({ path: `/userInfoManage/car/audit/${row.id}` })
    },
    // 点击 详情
    handleDelete(row) {
      this.$router.push({ path: `/userInfoManage/car/detail/${row.id}` })
    },
    getList() {
      var data = {
        'licenseNo': this.licenseNo,
        'auditName': this.auditName,
        'typeIds': this.typeIds,
        'auditStatuses': this.auditStatuses,
        'current': this.listQuery.current,
        'size': this.listQuery.size,
        'applyStartTime': parseTime(this.searchFrom.application[0]),
        'applyEndTime': parseTime(this.searchFrom.application[1]),
        'auditStartTime': parseTime(this.searchFrom.auditTime[0]),
        'auditEndTime': parseTime(this.searchFrom.auditTime[1])
      }
      carList(data).then((response) => {
        this.list = response.records
        this.total = response.total
        this.listLoading = false
      })
    },
    inquireBotton() {
      this.isshow = !this.isshow
    },
    getType(id) {
      const data = this.carState.filter(item => item.id === id)
      return data.length > 0 ? data[0].name : ''
    },
    getLength(id) {
      const data = this.carLength.filter(item => item.id === id)
      return data.length > 0 ? data[0].name + '米' : ''
    },
    getCarType() {
      getCarType().then((response) => {
        this.carState = response
      })
    },
    getCarLength() {
      getCarLength().then((response) => {
        this.carLength = response
      })
    },
    handleClick(e) {
      if (e.name === 'quanbu') {
        this.auditStatuses = []
        this.getList()
      } else {
        this.auditStatuses = [e.name]
        this.getList()
      }
    },
    handleSearch() {
      this.listQuery.current = 1
      this.getList()
    }

  }
}

</script>
<style lang="scss">
  .inquire-top {
    border: 1px solid #e4e4e4;
  }

  .inquire-button {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    /* border: 1px solid #e4e4e4; */
  }

  .search-condition {
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    width: 100%;
  }

  .search-input {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 10px;
  }
</style>
